<template>
  <div class="uploadImg">
    <!-- 新增空间 -->
    <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="179px" validate-on-rule-change>
      <el-form-item label="公共区域" prop="spaceName">
        <template>
          <el-input v-model="spaceInfoform.spaceName" placeholder="请输入空间名称"></el-input>
        </template>
      </el-form-item>
      <el-form-item label="空间logo" prop="avatar">
        <div class="uploadBox">
          <el-upload class="avatar-uploader" :action="addPersonApiUrl" :show-file-list="false" :http-request="uploadImg" :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="avatar-uploader" v-for="(item,index) in spaceInfoform.avatar" :key="index">
            <img class="avatar" :src="item">
            <i class="el-icon-delete" @click="deleteImg(index,item)"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="空间首页图" prop="cover">
        <div class="uploadBox">
          <el-upload class="avatar-uploader" :action="addPersonApiUrl" :show-file-list="false" :http-request="uploadImg" :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="avatar-uploader" v-for="(item,index) in spaceInfoform.cover" :key="index">
            <img class="avatar" :src="item">
            <i class="el-icon-delete" @click="deleteImg(index,item)"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="空间标题" prop="title">
        <template>
          <el-input v-model="spaceInfoform.title" placeholder="请输入空间标题"></el-input>
        </template>
      </el-form-item>
      <el-form-item label="空间类型" prop="type">
        <template>
          <el-select v-model="spaceInfoform.type" @change="Change(spaceInfoform.type)" placeholder="空间类型" style="width:380px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="建筑风格" prop="architecturalStyle">
        <template>
          <el-tag :key="tag" v-for="tag in architecturalStyle" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="spaceInfoform.architecturalStyle" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
        </template>
      </el-form-item>
      <el-form-item label="空间特色" prop="feature">
        <template>
          <el-tag :key="tag" v-for="tag in architecturalStyle" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="spaceInfoform.architecturalStyle" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
        </template>
      </el-form-item>
      <el-form-item label="空间简介" prop="description">
        <template>
          <el-input type="textarea" v-model="spaceInfoform.description"></el-input>
        </template>
      </el-form-item>
      <el-form-item label="空间地址" prop="address">
        <template>
          <el-input v-model="spaceInfoform.address" placeholder="请输入空间标题"></el-input>
        </template>
      </el-form-item>
      <!-- <el-form-item prop="mallAddress">
        <div id="baiduMap" style="height:300px;width:380px"></div>
      </el-form-item> -->
    </el-form>
    <div style="display:flex;justify-content:center;">
      <el-button @click="prevStep">上一步</el-button>
      <el-button type="primary" @click="nextStep('spaceInfoform')">下一步</el-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { getData } from '@/assets/js/mixin'
export default {
  name: 'uploadImg',
  mixins: [getData],
  props: {
    spaceInfoform: {
      type: Object,
      default: () => {
        return {}
      }
    },
    data2: {
      type: Array,
      default: () => {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      architecturalStyle: ['标签一'],
      inputVisible: false,
      inputValue: '',
      rules: {}
    }
  },
  method: {
    // 上一步
    prevStep() {
      this.$emit('prev-step')
    },
    // 点击下一步，将数据暴露给父组件
    nextStep(ruleForm) {
      this.$emit('next-step', this.spaceInfoform)
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.uploadImg
  margin 16px
  background #fff
  height 800px
  .content
    padding 16px
    display flex
    justify-content left
  .rowBox
    width 400px
    display flex
    flex-flow row nowrap
    .changeRow
      display flex
      flex-flow row wrap
      align-items left
    .selectBox
      width 100%
      border-radius 4px
      display flex
      flex-flow row wrap
      .selectedTip
        background #2C7DFF
        color #fff
        text-align center
        font-size 12px
        height 24px
        line-height 24px
        padding 0 5px
        margin 5px
        border-radius 4px
</style>
